<?php
/**
 * GioCMS
 * 
 * LICENSE
 *
 * This source file is subject to the GNU GENERAL PUBLIC LICENSE Version 2 
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://www.gnu.org/licenses/gpl-2.0.txt
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@ninhgio.com so we can send you a copy immediately.
 * 
 * @copyright	Copyright (c) 2010-2011 GioCMS (http://cms.ninhgio.com)
 * @license		http://www.gnu.org/licenses/gpl-2.0.txt GNU GENERAL PUBLIC LICENSE Version 2
 * @author		NinhGio - ninhgio@gmail.com
 * @since		1.0
 * @version		$Id:$
 */
?>
<?php 
$this->headStyle($this->APP_STATIC_SERVER . '/js/jquery.autocomplete/jquery.autocomplete.css');
$this->headScript($this->APP_STATIC_SERVER . '/js/jquery.bgiframe/jquery.bgiframe.min.js')
	 ->headScript($this->APP_STATIC_SERVER . '/js/jquery.autocomplete/jquery.autocomplete.js')
?>
<!-- Relate Article -->
<div class="content" style="margin-top: 10px;">
	<div class="box header mb0">
		<div class="head"><div></div></div>
		<h2><?php echo $this->TRANSLATOR->translator('article_relate', 'news'); ?></h2>
	</div>
	
	<div class="desc">
		<div class="body">
			<p class="g_a_bottom">
				<label for="simple_input"><?php echo $this->TRANSLATOR->translator('article_relate_enter_keyword', 'news'); ?></label>
				<input type="text" style="width: 95%" id="articleInput" class="text articleInput" />
			</p>
			<div>
				<div class="g_a_bottom">
					<p style="font-size: 11px;"><?php echo $this->TRANSLATOR->translator('article_relate_list_of_selected_articles', 'news'); ?></p>
					<br />
					<ul id="relateArticlesList" class="g_a_news_relate_article" style="margin-top: 5px;">
						<?php if (isset($this->relateArticles)) : ?>
						<?php foreach ($this->relateArticles as $article) : ?>
						<li class="g_a_relate_article_item">
							<a href="<?php echo $this->url('news_article_details', $article); ?>" target="_blank"><?php echo $article['title']; ?></a>&nbsp;-&nbsp;<input type="hidden" name="relateArticleIds[]" value="<?php echo $article['article_id']; ?>"><a title="<?php echo $this->TRANSLATOR->translator('article_relate_remove', 'news'); ?>" style="cursor: pointer;"><?php echo $this->TRANSLATOR->translator('article_relate_remove', 'news'); ?></a>
						</li>
						<?php endforeach; ?>
						<?php endif; ?>
					</ul>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="body_footer">
		<div class="bottom_left"><div class="bottom_right"></div></div>
	</div>
</div>
<!-- / Relate Article -->
<script type="text/javascript">
$(document).ready(function() {
	/**
	 * Make list relate articles autocomplete
	 */
	$('#articleInput').autocomplete('<?php echo $this->url('news_article_suggest', 'news'); ?>', {
		extraParams: { limit: 10 }
	}).result(function(event, item) {
		$('#articleInput').val('');
		if ($('#relateArticlesList').find('input[type="hidden"][value="' + item[1] + '"]').length == 0) {
			var li = $('<li/>')
						.html('<a target="_blank" href="' + item[2] + '">' + item[0] + '</a>&nbsp;-&nbsp;')
						.addClass('g_a_relate_article_item')
						.append($('<input/>').attr('type', 'hidden').attr('name', 'relateArticleIds[]').val(item[1]));
			$('<a/>')
				.html('<?php echo $this->TRANSLATOR->translator('article_relate_remove', 'news'); ?>')
				.attr('title', '<?php echo $this->STRING->escape($this->TRANSLATOR->translator('article_relate_remove', 'news')); ?>')
				.css('cursor', 'pointer')
				.click(function() {
					$(this).parent().remove();
				}).appendTo($(li));
			$(li).appendTo($('#relateArticlesList'));
		}
	});

	$('#relateArticlesList').find('li').each(function() {
		var li = this;
		var deleteLink = $(li).children('a:last');
		$(deleteLink).click(function() {
			$(li).remove();
		});
	});
});
</script>